<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/include/taglib.jsp" %>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="decorator" content="default" />
</head>
<body>
<script>
var datatable;

var treeObj;
var setting = {
	check: {
		enable: true
	},
	data : {
		simpleData : {
			enable : true,
			idKey : "uuid",
			pIdKey : "parentMenuId"
		}
	},
	async : {
		enable : true,
		url : "${ctx}/sys/menu/getAllMenuList.do",
		autoParam : [ "uuid" ],
		//otherParam:{"otherParam":"zTreeAsyncTest"},
		dataFilter : filter
	},
	view : {
		selectedMulti : true
	},
	callback : {
		onAsyncSuccess : zTreeOnAsyncSuccess,
		onClick : zTreeOnClick
	}
};

function filter(treeId, parentNode, childNodes) {
	if (!childNodes)
		return null;
	for (var i = 0, l = childNodes.length; i < l; i++) {
		if(childNodes[i].menuName != null) {
			childNodes[i].name = childNodes[i].menuName.replace(/\.n/g, '.');
		}
	}
	return childNodes;
};

function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
	//treeObj.expandAll(true);
	/* var nodes = treeObj.transformToArray(treeObj.getNodes());
	for (var i = 0; i < nodes.length; i++) {
		var node = nodes[i];
		if (node.parentOrgNo == "" || node.parentOrgNo == "10099") {
			treeObj.expandNode(node);
		}
	} */
	//让页面滚动条定位到顶部
	document.documentElement.scrollTop = 0; //IE
	document.body.scrollTop = 0; //Firefox
};
function zTreeOnClick(event, treeId, treeNode) {
	//alert(treeNode.tId + ", " + treeNode.name);
	//var orgId = treeNode.id;
	//$("#queryForm").find("input[name=orgId]").val(orgId);
};


//查询
function queryRole() {
	var oSettings = datatable.fnSettings();
	oSettings._iDisplayStart = 0;
	datatable.fnClearTable(0); //清空数据
	datatable.fnDraw(); //重新加载数据 
}

//删除方法 
function del(id,roleName){
	Otod.Msg.confirm('确定删除此角色【'+roleName+'】?',"确认删除", function(){
        	delOk(id);
      		
    });
}

//删除方法 
function delOk(id){
	Otod.ajax({
	    url: "${ctx}/sys/role/delRoles.do?roleId=" + id,
	    type: "GET",
	    successFn: function(data) {
	    	//
	    	$("#q_roleName").val("");
	    	queryRole();
	    	
	    }
	});
}

//取消
function abort(){
	$("#addDiv").collapse('hide');
	$("#addBtn").show();
	$('#roleSaveForm').data('bootstrapValidator').resetForm();
	
}

//保存成功，修改按钮状态
function saveSuc(){
		
}

//新增 
function addRole(obj){
	$("#addDiv").collapse('show');
	$("#addBtn").hide();
	
}

//修改 
function editRole(id,roleName){
	$('#roleId').val(id);
	$('#t_roleName').text(roleName);
	showTree();
	Otod.ajax({
		url:"${ctx}/sys/role/findAllMenu.do?roleId="+id,
		successFn: function(data){
			var treeObj2 = $.fn.zTree.getZTreeObj("menuTree");
			treeObj2.checkAllNodes(false);
			
			$.each(data, function(index,item){
				var node = treeObj2.getNodeByParam("uuid", item.menuId, null);
				treeObj2.checkNode(node,true,false,false);
			});
			
         	
		}
	 });
}

//保存角色相关菜单
/* $('#saveMenu').on("click", function(){
	alert(1);
	var obj = $('#menuTree').getSelectedNodes();
	alert(2);
	alert(obj.length);
	
}); */
function saveMenu(){
	var obj = treeObj.getCheckedNodes(true);
	var sb = new StringBuffer();
	for(var i=0;i<obj.length;i++){
			sb.append(",").append(obj[i].uuid);
	}
	Otod.ajax({
		url:"${ctx}/sys/role/saveRoleMenuIds.do?menuIds="+sb.toString().substring(1)+"&roleId="+$('#roleId').val(),
		successFn: function(data){
			Otod.Msg.info(data.info);
		}
	 });
}

//显示Tree
function showTree(){
	document.getElementById("showMenuTree").style.display="";

}
//隐藏Tree
function hiddenTree(){
	document.getElementById("showMenuTree").style.display="none";

}

//保存
function save(){
	if(!$('#roleSaveForm').data('bootstrapValidator').validate().isValid()){
		return;
	}
	Otod.ajax({
		url:"${ctx}/sys/role/saveRole.do",
		data: $('#roleSaveForm').serialize(),
		contentType: "application/x-www-form-urlencoded;",
		successFn:function(){
			$('#roleSaveForm button[type=reset]').click();		//重置form
			queryRole();
			$("#addDiv").collapse('hide');
			$("#addBtn").show();
		}
	});
}

$(document).ready(function() {
	$('#roleSaveForm').bootstrapValidator();
	//$('#roleSaveForm').data('bootstrapValidator').validate();
	
	
	var roleTableColums = [//定义列
            {
				"mData":"uuid",
				"sClass": "center",
				"bSortable": false,
				"mRender" : function(data, type, row) {
					//return'<input type=checkbox >&nbsp&nbsp<a class="red" href="javascript:del(\''+data+'\',\''+row.roleName+'\')"><i class="icon-trash bigger-130"></i></a>'
					return '<a class="red" href="javascript:del(\''+data+'\',\''+row.roleName+'\')"><i class="icon-trash bigger-130"></i></a>';
				}
            },
            {"mData":"roleNo"},
            {"mData": "roleName"},
            {
				"mData":"uuid",
				"sClass": "center",
				"bSortable": false,
				"mRender" : function(data, type, row) {
					return '<a href="#" onclick="editRole(\''+row.uuid+'\',\''+row.roleName+'\');return false;">角色权限</a>';
				}
            }
    ];
	
    //初始化dataTable
	datatable = $('#roleTable').dataTable( {
    	'sAjaxSource': '${ctx}/sys/role/queryPage.do',	//请求数据源 
    	"fnServerData": function(sSource, aoData, fnCallback,oSettings){
    		$.extend(aoData,$('#roleQueryForm').serializeArray());
    		$.ajax({
	    		dataType: 'json',
	    		url : sSource,
	    		data: aoData,
	    		success: fnCallback
    		});
    	},
    	//"sServerMethod":"post",  
		'bServerSide':true,							//是否启动服务器端数据导入
		"bLengthChange" : false,
		"bInfo" : true,
		"bPaginate" : true,
        'bFilter': false,                       	//是否使用内置的过滤功能。
        'aoColumns': roleTableColums,
         "sDom": '<"toolbar">frtip', 
         "oLanguage": oLanguage
	});
    //初始化Tree
	treeObj = $.fn.zTree.init($("#menuTree"), setting);
    
	
});


</script>

<div class="row">
	<div class="col-sm-12">
		<div class="row">
			<h3 class="header smaller lighter blue">
				<small>查询</small>
			</h3>	
			<form class="form-horizontal" role="form" name="roleQuery" id="roleQueryForm" action="" method="get">
				<div class="col-sm-4" >
					<label for="q_roleName" class="col-sm-5 control-label">角色名称</label>
					<div class="col-sm-7">
						<input type="text" class="form-control input-sm" id="q_roleName" name="q_roleName" placeholder="角色名称">
					</div>
				</div>
				<div class="col-sm-4">
				    <button type="button" class="btn btn-xs btn-info" onclick="queryRole();"><i class="icon-search"></i>查询</button>
					<button class="btn btn-xs btn-default" type="reset"><i class="icon-undo"></i>重置</button>
				</div>
				<div class="col-sm-4"></div>
				
			</form>
		</div>
			
		<div class="row">
			<div class="col-xs-12">
				<button id="addBtn" class="btn btn-xs btn-success" type="button"  onclick="addRole(this);"><i class="icon-plus-sign"></i>新增</button>
			</div>
		</div>
		<div id="addDiv" class="row clearfix collapse">
			<h3 class="header smaller lighter blue">
				<small>新增</small>
			</h3>
			<div class="col-xs-12">
				<form class="form-horizontal" role="form" name="roleSaveForm" id="roleSaveForm" 
					data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
				    data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
				    data-bv-feedbackicons-validating="glyphicon glyphicon-refresh"
				>
					<div class="col-sm-4" >
						<label for="roleNo" class="col-sm-5 control-label">角色编码</label>
						<div class="col-sm-7">
							<input type="text" class="form-control input-sm" id="roleNo" name="roleNo" placeholder="角色编码" data-bv-notempty data-bv-notempty-message="角色编码必填">
						</div>
					</div>
					<div class="col-sm-4" >
						<label for="roleName" class="col-sm-5 control-label">角色名称</label>
						<div class="col-sm-7">
							<input type="text" class="form-control input-sm" id="roleName" name="roleName" placeholder="角色名称" data-bv-notempty data-bv-notempty-message="角色名称必填">
						</div>
					</div>
					<div class="col-sm-4" >
						<button class="btn btn-xs btn-success"  onclick="save()"><i class="icon-save"></i>保存</button>
						<button class="btn btn-xs btn-default"  onclick="abort();"><i class="icon-undo"></i>取消</button>
					</div>
				</form>
			</div>
		</div>
		
		
		<div class="row">
			<h3 class="header smaller lighter blue">
			</h3>
			<div class="col-sm-7">
				<div class="table-responsive">
					<table id="roleTable" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th width="5%"></th>
								<th width="20%">角色编码</th>
								<th width="20%">角色名称</th>
								<th width="10%"></th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
			<div class="col-sm-5" id="showMenuTree" style="display:none;">
				<div class="widget-box">
					<div class="widget-header widget-header-flat">
						<h4 class="smaller">【<span  id="t_roleName" ></span>】权限</h4>
						<div style="text-align: right; float: right; margin-right: 10px;margin-top: 10px;"><a href="javascript:hiddenTree()">关闭</a></div>
					</div>
					<div class="widget-body">
						<div class="widget-main">
							<div class="row">
								<div class="col-sm-12">
									<input type="hidden" id="orgId">
									<input type="hidden" id="roleId">
									<button class= "btn btn-xs btn-success" type="button" onclick="saveMenu();"><i class="icon-save"></i>保存</button>
									<button class= "btn btn-xs btn-default" type="button" id="reset"><i class="icon-undo"></i>重置</button>
								</div>
							</div>
							<ul id="menuTree" class="ztree"></ul>
						</div>
						
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
